<template>
  <div class="card">
    <!-- 标题 -->
    <div class="cardtop">
      <h1>{{cardone.repair ? '运维人员': '运营人员'}}(当日)</h1>
    </div>
    <!-- 数据展示 -->
    <div class="cardbut">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="mmm">
            <p>工单总数</p>
            <h3>{{cardone.total}}</h3>
          </div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="mmm">
            <p>完成工单</p>
            <h3>{{cardone.completedTotal}}</h3>
          </div>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="mmm">
            <p>拒绝工单</p>
            <h3>{{cardone.cancelTotal}}</h3>
          </div>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="mmm">
            <p>运维人员数</p>
            <h3>{{cardone.workerCount}}</h3>
          </div>
          </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AV',
  props: {
    cardone: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  .cardtop {
    height: 12vh;
    line-height: 10vh;
    border-bottom: 3px groove #f8fafd;
    h1 {
      margin-left: 20px;
    }
  }
  .cardbut {
    height: 35vh;
    .mmm {
      height: 20px;
      margin-left: 18px;
      margin-top: 28px;
      width: 78px;
      display: flex;
      flex-direction: column;
      p {
        text-align: center;
        font-size: 14px;
        color: coral;
      }
      h3 {
        text-align: center;
        margin-top: 5px;
        font-size: 24px;
      }
    }
  }
}
</style>
